<template>
    <a-form class="smart-query-form">
        <a-row class="smart-query-form-row">
            <a-form-item label="开票日期" class="smart-query-form-item">
                <a-space direction="vertical" :size="12">
                    <a-range-picker v-model:value="searchDate" :presets="defaultTimeRanges" @change="dateChange" />
                </a-space>
            </a-form-item>
            <a-form-item label="购方/开票员" class="smart-query-form-item" name="name">
                <a-input v-model:value="searchParam.name" placeholder="请输入" />
            </a-form-item>
            <a-form-item class="smart-query-form-item smart-margin-left10">
                <a-button type="primary" @click="search">
                    <template #icon>
                        <SearchOutlined />
                    </template>
                    查询
                </a-button>
                <a-button @click="reset" style="margin-left: 6px;">
                    <template #icon>
                        <ReloadOutlined />
                    </template>
                    重置
                </a-button>
            </a-form-item>
        </a-row>
    </a-form>

    <a-card size="small" :bordered="false" :hoverable="true">
        <a-row class="smart-table-btn-block">
            <div class="smart-table-operate-block">
                <a-button @click="showVoucherModal" type="primary" size="small">
                    生成凭证
                </a-button>
                <a-button @click="showNoInvoiceModal" danger size="small" >
                    <template #icon>
                        <DeleteOutlined />
                    </template>
                    无票销售
                </a-button>
            </div>  
            <div class="smart-table-setting-block">
                <TableOperator v-model="columns" :tableId="null" :refresh="reset" />
            </div>
        </a-row>
        <a-table :scroll="{ x: 1000 }" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            size="small" :dataSource="tableData" :columns="columns" rowKey="id" :pagination="false"
            :loading="tableLoading" bordered>
            <template #bodyCell="{ column, record, text }">
                <template v-if="column.dataIndex === 'action'">
                    <div class="smart-table-operate">
                        <a-button @click="showForm(record)" type="link">编辑</a-button>
                        <a-button @click="confirmDelete(record)" danger type="link">刪除 </a-button>
                    </div>
                </template>
            </template>
        </a-table>

        <div class="smart-query-table-page">
            <a-pagination showSizeChanger showQuickJumper show-less-items :pageSizeOptions="PAGE_SIZE_OPTIONS"
                :defaultPageSize="pageable.pageSize" v-model:current="pageable.pageNum"
                v-model:pageSize="pageable.pageSize" :total="pageable.total" @change="handleSizeChange"
                :show-total="(total) => `共total条`" />
        </div>
        <div class="summary-info" style="margin-top: 8px; color: #666; font-size: 15px;">
          <b>合计</b>
          非作废发票 <span style="color: #ff9900;">{{ summaryInfo.totalInvoice }}</span> 张，
          金额 <span style="color: #ff9900;">{{ summaryInfo.totalAmount }}</span> 元，
          税额 <span style="color: #ff9900;">{{ summaryInfo.totalTax }}</span> 元，
          价税合计 <span style="color: #ff9900;">{{ summaryInfo.totalAmountWithTax }}</span> 元；
          作废发票 <span style="color: #ff9900;">{{ summaryInfo.voidInvoice }}</span> 张。
        </div>
        <!-- <formModal ref="baseFormRef" @refresh="ajaxQuery" /> -->
        <UpdateFormModal ref="updateFormModal" @refresh="ajaxQuery" />
        <VoucherFormModal ref="voucherFormRef" />
        <NoInvoiceModal ref="noInvoiceModalRef" />
    </a-card>
</template>
<script setup>
import { reactive, ref, onMounted, computed } from 'vue';
import { message, Modal } from 'ant-design-vue';
import dayjs from 'dayjs';
import { useTable } from '/@/hooks/useTable';
import { useHandleData } from '/@/hooks/useHandleData';
import { defaultTimeRanges } from '/@/lib/default-time-ranges';
import DictSelect from '/@/components/cache/dict-select.vue'
import { SERVICE_ID_ENUM, DICT_TYPE_ENUM } from '/@/constants/system/cache-service-id-const';
import { taskApi } from '/@/api/task/task-api';
import { useRouter } from 'vue-router';
import TableOperator from '/@/components/support/table-operator/index.vue';
import { TABLE_ID_CONST } from '/@/constants/support/table-id-const';
//   import formModal from './components/client-form-modal.vue';
import VoucherFormModal from './components/voucher-form-modal.vue';
import NoInvoiceModal from './components/no-invoice-modal.vue';
 
const initParam = reactive({    
    startTime: '',
    endTime: ''
})
function dateChange(dates, dateStrings) {
    initParam.startTime = dateStrings[0]
    initParam.endTime = dateStrings[1]

}

const {
    tableData,
    pageable,
    searchParam,
    searchInitParam,
    isShowPage,
    getTableList,
    search,
    reset,
    tableLoading,
    handleSizeChange,
} = useTable(taskApi.getTestPage, initParam);
// --------------------------- 表格 ---------------------------
const columns = ref([
    {
        title: '发票号码',
        dataIndex: 'contact',
        // minWidth: 180,
    },

    {
        title: '开票日期',
        dataIndex: 'implementerName',
        // width: 100,
    },
    {
        title: '发票状态',
        dataIndex: 'taskRate',
        // width: 100,
    },
    {
        title: '补全状态',
        // width: 100,
        dataIndex: 'planBegin',
    },
    {
        title: '发票原件',
        // width: 100,
        dataIndex: 'planEnd',
    },
    {
        title: '凭证号',
        // width: 100,
        dataIndex: 'approveName',
    },
    {
        title: '货物、应税劳务及服务',
        // width: 100,
        dataIndex: 'approveName',
    },

    {
        title: '操作',
        dataIndex: 'action',
        fixed: 'right',
        width: 100,
    },
]);

//多选
let selectedRowKeys = ref([]);
let selectedRows = ref([]);
// 是否有选中：用于 批量操作按钮的禁用
const hasSelected = computed(() => selectedRowKeys.value.length > 0);

function onSelectChange(keyArray, selectRows) {
    selectedRowKeys.value = keyArray;
    selectedRows.value = selectRows;

}
const baseFormRef = ref();
function showForm(data) {
    baseFormRef.value.showModal(data);
}


// --------------------------- 删除 ---------------------------

async function confirmDelete(row) {
    let params = { id: row.id };
    await useHandleData(taskApi.getTestPage, params, '确认删除吗');

}

// 统计信息模拟数据
const summaryInfo = ref({
  totalInvoice: 11,
  totalAmount: 357436.75,
  totalTax: 46466.77,
  totalAmountWithTax: 403903.52,
  voidInvoice: 0,
});

const voucherFormRef = ref();
function showVoucherModal() {
    voucherFormRef.value.showModal();
}

const noInvoiceModalRef = ref();
function showNoInvoiceModal() {
    noInvoiceModalRef.value.showModal();
}

</script>
<style lang="less" scoped></style>